<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>login_code</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        #loginPage {
            background: url(../../image/loginBg.png) no-repeat center;
            background-size: 100% 100%;
        }

        .logintitle {
            height: 69px;
            text-align: center;
            margin: 57px 0 134px;
        }

        .login-third {
            margin-top: 3rem;
        }

        .login-input {
            text-indent: 5px;
            letter-spacing: 2px;
            font-size: 17px!important;
        }

        .aui-list {
            background-color: rgba(255, 255, 255, 0);
        }
        .aui-btn-info.aui-active,
        .aui-btn-info:active,
        .aui-list.aui-form-list .aui-list-item:active{
            color: transparent !important;
            background-color: transparent !important;
        }
        .creatOrforget:active{
              background-color:  transparent !important;
        }
        .aui-list .aui-list-item {
            margin: 0 0 0px 28px;
            height: 56px;
            line-height: 56px;
            padding-left: 0;
            border-bottom: 1px solid rgba(204, 204, 204, .2);
            background-image: -webkit-linear-gradient(90deg, rgba(221, 221, 221, 0), rgba(221, 221, 221, 0) 50%, transparent 50%);
            background-image: linear-gradient(90deg, rgba(221, 221, 221, 0), rgba(221, 221, 221, 0) 50%, transparent 50%);
        }

        @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
            .aui-list {
                background-image: linear-gradient(90deg, rgba(221, 221, 221, 0), rgba(221, 221, 221, 0) 50%, transparent 50%);
            }
        }

        .aui-btn-block {
            width: 90%;
            margin: 0 auto;
        }

        .aui-content-padded.login-third {
            margin: 0;
        }

        .loginOpert .creatOrforget {
            padding: 0.2rem 0;
            color: #969696;
        }

        .loginOpert .creatOrforget:first-child {
            text-align: left;
            padding-left: 29px;
        }

        .loginOpert .creatOrforget:last-child {
            text-align: right;
            padding-right: 29px;
        }

        .logintitle span {
            width: 34px;
            height: 69px;
            background: url(../../image/loginName@2x.png) no-repeat center;
            background-size: 100%;
        }

        .loninBtnse {
            margin-top: 134px;
        }

        .loninBtn {
            height: 40px!important;
            line-height: 40px!important;
            width: 245px;
            background: url(../../image/loginBtn@2x.png) no-repeat center;
            background-size: 100%;
            background-color: rgba(255, 255, 255, 0) !important;
        }

        .getVilidCode {
            font-size: 17px;
            color: #141414 !important;
            background-color: rgba(255, 255, 255, 0)!important;
        }

        .aui-list.aui-form-list {
            border-top: none!important;
            letter-spacing: 2px;
        }

        /*适配屏幕320px*/

        @media (max-width: 320px) {
            .loninBtn {
                height: 27px!important;
                line-height: 27px!important;
                width: 163px;
            }
            .logintitle span {
                width: 23px;
                height: 64px;
            }
            .logintitle {
                margin: 38px 0 90px;
            }
            .loninBtnse {
                margin-top: 107px;;
            }
            .aui-list .aui-list-item {
                height: 47px;
                line-height: 47px;
            }
            .aui-list .aui-list-item,
            .login-input,
            .getVilidCode,
            .loginOpert .creatOrforget {
                font-size: 12px!important;
            }
        }
        @media (min-width: 414px) {
            .loninBtn{
              height: 47px!important;
              line-height: 47px!important;
              width: 263px;
            }
        }
        /*适配屏幕320px*/
    </style>
</head>

<body>
    <div id="loginPage" v-bind:style="{height:wHeight}">
        <section class="aui-content aui-margin-t-15">
            <h1 class="logintitle"><span></span></h1>
            <ul class="aui-list aui-form-list ">
                <li class="aui-list-item">
                    <div class="aui-list-item-label  color-orange">
                        手机号
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input aui-padded-l-10">
                            <input type="tel" placeholder="请输入手机号" ref="mobileNum" id="mobile"  class="login-input"  v-on:change="getPhoneValue()">
                                         <!-- pattern="[0-9]*" -->
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label color-orange">
                        验证码
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input aui-padded-l-10" style="padding-right: 0;">
                            <input type="text"  placeholder="请输入验证码"  ref="validateCode" id="code" class="login-input" v-on:change="getVilidCodeValue()">
                            <!-- pattern="^1[345678][0-9]{9}$" -->
                        </div>
                        <div class="aui-list-item-label aui-margin-r-15" style="width: 8rem;" v-on:click="getValidateCode()">
                            <div class="aui-btn aui-btn-info getVilidCode" style="width: 7.5rem;">{{getText}}</div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
        <section class="aui-content-padded loninBtnse">
            <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm loninBtn" v-on:click="loginOperate()"></div>
        </section>
        <section class="aui-content-padded login-third loginOpert">
            <div class="aui-grid" style="background: none;">
                <div class="aui-row">
                    <div class="aui-col-xs-6 creatOrforget" v-on:click="gotoLoginPwd()">
                        密码登录
                    </div>
                    <div class="aui-col-xs-6 creatOrforget"  v-on:click="gotoRegist()">
                        创建账号
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function() {
      api.parseTapmode();
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    var usertokenData = $api.getStorage('tokenData');
    ////初始化页面
    var app = new Vue({
        el: '#loginPage',
        data: {
            wHeight: '',
            phoneNum : '',
            validateCode : '',
            getText : '点击获取',
            countryCode : '+86',
            // custmoerType : $api.getStorage('customerType'),
            // userInfo :  $api.getStorage('userInfo'),
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh-20) + 'px';
            },
            //////点击获取验证码
            getValidateCode : function(){
               this.phoneNum = this.$refs.mobileNum.value;
                   login.getValidateCodeCountTime();//////开始计时
                   login.getValidateCodeMethod();
            },
            /////输入手机号获得值
            getPhoneValue : function(){
               this.phoneNum = this.$refs.mobileNum.value;
            },
            /////输入验证码获得验证码值
            getVilidCodeValue : function(){
               this.validateCode = this.$refs.validateCode.value;
            },
            /////点击登录按钮
            loginOperate : function(){
              api.showProgress({
                  title: '',
                  text: '正在登录...',
                  modal: false
              });
              setTimeout(function(){
                 login.loginOperateMethod();
              },500);
            },
            /////点击创建账号
            gotoRegist : function(){
              login.gotoRegistMethod();
            },
            /////点击密码登陆
            gotoLoginPwd : function(){
              login.gotoLoginPwdMethod();
            }
        },
        mounted:function(){
            this.init();
        }
    });
    //////登录
    var login = {
      //////获取验证码请求
        getValidateCodeMethod : function(){
          $c.ajax({
              url: 'http://dev-m-api.jiucaig.com/index.php?l=zh-cn&s=/Api/Login/sendLoginVerificationCode',////手机号获取验证码/////成功调用
              method:'post',
              values:{
                  //countryCode:app.username,
                  phone: app.phoneNum
              },
              success: function(ret) {
                //console.log(JSON.stringify(ret));
                if(ret) {
                    bf_common_view.bf_win.popToast("验证码发送成功!");
                }
              },
              err:function(err){
                bf_common_view.bf_win.popToast("发送失败！");
                //console.log(JSON.stringify(err));
              }
          });
        },
        ////点击登录按钮操作
        loginOperateMethod : function(){
            $c.ajax({
                url: 'http://dev-m-api.jiucaig.com/index.php?l=zh-cn&s=/Api/Login/loginByVerificationCode',////手机号加验证码登录////
                method:'post',
                values:{
                    //countryCode : app.countryCode,
                    phone : app.phoneNum,
                    code :  app.validateCode//////验证码
                },
                success: function(ret) {
                    //console.log(JSON.stringify(ret))
                    api.hideProgress();//关闭等待框
                    if(ret) {
                        $api.setStorage('tokenData', ret);
                        if(app.userInfo == undefined){
                             bf_common_view.bf_win.openWin('regist', '../');
                             setTimeout(function(){
                                 api.closeWin();
                             },800)                             
                        }else{
                            api.closeToWin({
                                name: 'root'
                            });
                            setTimeout(function(){
                                api.closeWin();
                            },1000)
                        }
                    }
                },
                err:function(err){
                    api.hideProgress();//关闭等待框
                    bf_common_view.bf_win.popToast(err.body.errmsg);
                //  console.log(JSON.stringify(err));
                }
            });
        },
        ////获取验证码倒计时
        getValidateCodeCountTime : function(){
             var _countTime = 60;
             var clock =  setInterval(function(){////定时器
               time();
             },1000)
             function time(){
                   if (_countTime == 0) {
                     /////清除定时器
                     clearInterval(clock);
                      app.getText = "点击获取";
                      _countTime = 60;
                   } else {
                      app.getText = _countTime +'s';
                      _countTime--;
                   }
            }
        },
        /////点击打开注册页面
        gotoRegistMethod : function(){
            bf_common_view.bf_win.openWin('custmoerRegist', '../');
            setTimeout(function(){
                api.closeWin({name: 'login_code'});
            },800)
        },
        /////点击打开密码登录页面
        gotoLoginPwdMethod : function(){
            setTimeout(function(){
                api.closeWin({name: 'login_code'});
            },800);
            bf_common_view.bf_win.openWin('login_pwd', './');

        }
    };
</script>

</html>
